<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*通过 link 引入外部样式表*/

        /*HTML内部的 内部样式表*/
        .box{

            /* padding border 盒子外扩 140*140*/
            width: 60px;
            height: 60px;
            padding: 10px;
            border: 10px solid blue;
            background-color: red;

        }
        .box1{
            width: 100px;
            height: 100px;
            background-color: gold;
        }

        .box2{

            /* padding border 盒子外扩 140*140*/
            /* 可以通过一个 box-sizing 属性，使得盒子内减（减少内容的宽高，使得减少的盒子的大小达到预期）*/
            /*content-box 默认值，内容盒子，外扩。这个盒子实际占据的大小：margin-left + border-left+ padding-left +内容 width + pading-right + border-right + margin-right */
            /*box-sizing: content-box;*/

            /* border-box 这个属性值，会自动的内减 现在设置的 width 和 height 就是这个实际占据的大小。这种盒子内容的宽高，其实是没有100，真实的：60*60*/

            /* 浏览器是分两个阵营。 IE自成一个提下，IE（IE6、7、8）*/
            /* 微软：Windows  网景：netskp 火狐前身 开源 提交软件基金协会 apache 。*/
            /*微软 低版本都是使用的IE标准*/

            /* 火狐，Chrome、Safari、微软新的浏览器 IE 9 IE10 都是使用的 w3c 标准*/
            /* w3c 标准，定义浏览器该如何渲染网页，HTML标签是哪些，标签的大小，还有 css如何定义，如何引入，有哪些属性*/

            /* 有些兼容问题考虑，要实现同样的效果，IE的写法和 w3c 写法有些不一样的。*/

            /* 但是对目前前端来说，一般也不要过分的考虑IE678 国内的 淘宝大公司已经彻底放弃 IE678 遇到问题，然后在百度进行解决*/

            /*一般笔试的时候，还是会出现。*/

            /* w3c 使用的盒子模型是：content-box 外扩盒子*/

            /* IE低版本 border-box 也称之为：怪异盒子 */

            /* 这种盒子好用，不需要在手工去计算*/
            box-sizing: border-box;

            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px solid blue;
            background-color: skyblue;

        }


    </style>
</head>
<body>

<div class="box">

</div>
<div class="box1">

</div>
<div class="box2"></div>
</body>
</html>